/*第一章练习*/
body{
	background: #333;
}
.container{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	margin: 1rem;
	border: 0;
	border-radius: 0;
	background: #333;
}
.box{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	border: 1px solid white;
	border-radius: 10%;
	background: white;
	height: 100px;
	width: 100px;
	margin:1em .2em;
}
.row{
	display: -webkit-flex;
	-webkit-flex-basis: 100%;
	-webkit-justify-content: space-between;
}
.box span::after{
	content: '';
	display: block;
	border: 1px solid #333;
	width: 20px;
	height: 20px;
	border-radius: 99%;
	margin: .2em;
	background: black;
}
.red{
	color: red;
}

/*
	justify-content属性定义了项目在主轴上的对齐方式
*/
.box1{
	/*默认值*/
	justify-content: flex-start;
}
.box2{
	-webkit-justify-content: center;
	justify-content: center;
}
.box3{
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.box4{
	-webkit-justify-content: flex-start;
	-webkit-align-items: center;
}
.box5{
	-webkit-justify-content: center;
	-webkit-align-items: center;
}
.box6{
	-webkit-justify-content: flex-end;
	-webkit-align-items: center;
}
.box7{
	-webkit-justify-content: flex-start;
	-webkit-align-items: flex-end;
}
.box8{
	-webkit-justify-content: center;
	-webkit-align-items: flex-end;
}
.box9{
	-webkit-justify-content: flex-end;
	-webkit-align-items: flex-end;
}


.box2-1{
	-webkit-justify-content: space-between;
}
.box2-2{
	-webkit-justify-content: space-between;
	-webkit-align-items: center;
}
.box2-3{
	-webkit-justify-content: space-between;
	-webkit-align-items: flex-end;
}
.box2-4{
	-webkit-justify-content: space-between;
	-webkit-flex-direction: column;
}
.box2-5{
	-webkit-justify-content: space-between;
	-webkit-flex-direction: column;
	-webkit-align-items: center;
}
.box2-6{
	-webkit-justify-content: space-between;
	-webkit-flex-direction: column;
	-webkit-align-items: flex-end;
}
.item2-7:nth-child(2){
	-webkit-align-self: center;
}
.box2-8{
	-webkit-justify-content: space-between;
}
.item2-8:nth-child(2){
	-webkit-align-self: flex-end;
}
.box2-9{
	-webkit-justify-content: flex-end;
}
.item2-9:first-child{
	-webkit-align-self: center;
}
.box2-10{
	-webkit-justify-content: space-between;
}
.item2-10:first-child{
	-webkit-align-self: flex-end;
}


.box3-1{
	-webkit-justify-content: space-between;
}
.box3-2{
	-webkit-justify-content: space-between;
	-webkit-align-items: center;
}
.box3-3{
	-webkit-justify-content: space-between;
	-webkit-align-items: flex-end;
}
.box3-4{
	-webkit-justify-content: space-between;
	-webkit-flex-direction: column;
}
.box3-5{
	-webkit-justify-content: space-between;
	-webkit-flex-direction: column;
	-webkit-align-items: center;
}
.box3-6{
	-webkit-justify-content: space-between;
	-webkit-flex-direction: column;
	-webkit-align-items: flex-end;
}
.box3-7,.box3-8{
	-webkit-justify-content: space-between;
}
.item3-7:nth-child(2), .item3-8:nth-child(2){
	-webkit-align-self: center;
}
.item3-7:nth-child(3){
	-webkit-align-self: flex-end;
}
.item3-8:first-child{
	-webkit-align-self: flex-end;
}

.box4-1,.box4-2,.box4-3{
	-webkit-justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-webkit-align-content: space-between;
}
.box4-2 span:nth-child(4){
	/*不一定要absolute与relative的,关键是设置宽与margin*/
	margin: 0 auto;
}
.box4-3 .row{
	-webkit-justify-content: flex-end;
}
.box4-4,.box4-5,.box4-6{
	-webkit-justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-webkit-align-content: space-between;
	-webkit-flex-direction: column;
}
.box4-5 span:nth-child(4){
	margin: auto 0;
}
.box4-6 .row{
	-webkit-flex-direction: column;
	-webkit-justify-content: flex-end;
}
.box4-7,.box4-8,.box4-9{
	-webkit-justify-content: space-between;
	-webkit-flex-wrap: wrap-reverse;
	-webkit-align-content: space-between;
	-webkit-flex-direction: column;
}
.box4-8 span:nth-child(4){
	margin: auto 0;
}
.box4-9 .row{
	-webkit-flex-direction: column;
	-webkit-justify-content: flex-end;
}

.box4-10,.box4-11,.box4-12{
	-webkit-justify-content: space-between;
	-webkit-flex-wrap: wrap-reverse;
	-webkit-align-content: space-between;
}
.box4-11 span:nth-child(4){
	margin: 0 auto;
}
.box4-12 .row{
	-webkit-justify-content: flex-end;
}
.box4-13 {
	-webkit-align-content: space-between;
}


.box5-1,.box5-2,.box5-3,.box5-4,.box5-5{
	-webkit-justify-content: space-between;
	-webkit-align-content: space-between;
	/*-webkit-align-items: center;*/
}
.box5-1 span:nth-child(2){
	position: relative;
	margin: auto 0;
	top: 0;
	bottom: 0;
}

.box5-2{
	-webkit-flex-wrap: wrap-reverse;
}
.box5-3,.box5-4{
	-webkit-flex-direction: column;
}
.box5-4{
	-webkit-flex-wrap: wrap-reverse;
}
.box5-5 .row:nth-child(2){
	-webkit-justify-content: center;
}


.container6 .box{
	-webkit-justify-content: space-between;
	-webkit-align-content: space-between;
}
.container6 .box:nth-child(2){
	-webkit-flex-direction: column;
}


.for-show .box:first-child{
	-webkit-justify-content: center;
}
.for-show .box:first-child span{
	-webkit-align-self: center;
}

.for-show .box:nth-child(2){
	/*-webkit-flex-direction: column;*/
	-webkit-justify-content: space-between;
	-webkit-align-items: center;
}

.for-show .box:nth-child(3){
	-webkit-justify-content: space-between;
}
.for-show .box:nth-child(3) span:nth-child(2){
	-webkit-align-self: center;
}
.for-show .box:nth-child(3) span:nth-child(3){
	-webkit-align-self: flex-end;
}

.for-show .box:nth-child(4){
	-webkit-align-content: space-between;
}

.for-show .box:nth-child(5){
	-webkit-justify-content: space-between;
	-webkit-align-content: space-between;
}
.for-show .box:nth-child(5) .row{
	-webkit-justify-content: center;
}

.for-show .box:nth-child(6){
	-webkit-justify-content: space-between;
	-webkit-align-content: space-between;
	-webkit-flex-direction: column;
}


/*
	第二章练习 网格Grid
*/
.grid-container{
	background: whitesmoke;
	padding: .1em 0;
	width: 98%;
	/*border-radius: 1%;*/
}
.grid{
	display: -webkit-flex;
	border: 1px solid whitesmoke;
	width: 96%;
	height: 100%;
	background: whitesmoke;
	margin: .5rem auto;
	padding: .1em 0;
}
.grid-cell{
	position: relative;
	-webkit-flex: 1;
	line-height: 40px;
	background-color: gainsboro;
	margin: 0 .5em;
	text-align: center;
	/*white-space: pre-wrap;*/
}
.grid-cell span{
	width: 100%;
	height: 16px; /*默认font-size,一定要设置,不然无法计算垂直居中*/
	line-height: 1em;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto ;
}

/*
	第三章练习 网格Grid
*/
.holy-grail{
	background: lightgray;
	border: 1px solid lightgray;
	height: 50vh; /*vh是什么*/
	width: 97.1%;
	margin: .5rem 0;
	/*border-radius: 1%;*/
	padding: .3rem;
	opacity: .9;
	display: -webkit-flex;
	-webkit-flex-direction: column;
}
.holy-grail header, .holy-grail footer {
	position: relative;
	-webkit-flex: 0 0 15%;
	background: #666;
}
.holy-grail-body{
	-webkit-flex: 1;
	display: -webkit-flex;
}
.holy-grail-body main{
	position: relative;
	-webkit-flex: 1;
}
.holy-grail-body nav, .holy-grail-body aside{
	position: relative;
	-webkit-flex: 0 0 6em;
}
.holy-grail-body nav{
	-webkit-order: 0;
	background: dodgerblue;
	opacity: .7;
}
.holy-grail-body main{
	-webkit-order: 1;
}
.holy-grail-body aside{
	-webkit-order: 2;
	background: goldenrod;
	opacity: .9;
}
.holy-grail .center{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 16px;
	margin: auto;
	text-align: center;
}

/*最后一章,流式布局.每行固定元素*/
.flow-layout{
	background: lightgray;
	border: 1px solid lightgray;
	height: 50vh; /*vh是什么*/
	width: 97.1%;
	margin: .5rem 0;
	/*border-radius: 1%;*/
	padding: .3rem;
	opacity: .9;
}
.flow-container{
	background: white;
	width: 100%;
	height: 100%;
	/*padding: .3em;*/
	/*padding-top: .2em ;*/
	overflow: hidden;
}
.flow-box{
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	background: #000;
	margin:.3em;
}
.flow-item{
	background: white;
	box-sizing: border-box;
	border: 1px solid red;
	/*width: 75px;*/
	height: 50px;
	-webkit-flex: 0 0 25%;
}